import React, { Fragment, useState } from 'react'
import { Col } from 'antd'
import FormList from './FormList'
import ConditionWidget from './ConditionWidget'
import Subgroups from './Subgroups'
import { FormInstance, FormLayout } from 'antd/lib/form/Form'
import { SchemaTypeItem, SchemaItem, ListenerItem, OptionsFetch } from '../index'

import { InputWidget, InputNumber, Select, DatePicker, Switch } from '../Widgets'

interface Props {
  schema: SchemaItem
  formInstance:FormInstance
  layout: FormLayout
  row?: SchemaTypeItem['row']
  onFinish: (values: Object) => void
}

export interface FormWidgetProps {
  newSchema: SchemaItem
  setNewSchema: React.Dispatch<React.SetStateAction<SchemaItem>>
  formInstance:FormInstance
  layout:FormLayout
  onFinish: (values: Object) => void
  children?: any
}

// 字段微件
const widgetsFiled = {
  // eslint-disable-next-line react/display-name
  Select: (formWidgetProps:FormWidgetProps) => {
    return <Select {...formWidgetProps}></Select>
  },
  // eslint-disable-next-line react/display-name
  Input: (formWidgetProps:FormWidgetProps) => {
    return <InputWidget {...formWidgetProps}></InputWidget>
  },
  // eslint-disable-next-line react/display-name
  InputNumber: (formWidgetProps:FormWidgetProps) => {
    return <InputNumber {...formWidgetProps}></InputNumber>
  },
  // eslint-disable-next-line react/display-name
  Switch: (formWidgetProps:FormWidgetProps) => {
    return <Switch {...formWidgetProps}></Switch>
  },
  // eslint-disable-next-line react/display-name
  DatePicker: (formWidgetProps:FormWidgetProps) => {
    return <DatePicker {...formWidgetProps}></DatePicker>
  }
}

function index({ schema, ...reset }: Props) {
  const [newSchema, setNewSchema] = useState<SchemaItem>({ ...JSON.parse(JSON.stringify(schema)) })
  const { widget = 'input', key, ui } = newSchema
  const { colSpan = 12, offset = 0 } = ui
  // 是否依赖
  const isDepend = newSchema?.listeners?.length && newSchema?.listeners.some((li: ListenerItem) => li?.watch?.length) || Object.prototype.toString.call(newSchema?.options) === '[object Object]' && (newSchema?.options as OptionsFetch)?.watch?.length

  const FormWidget = widgetsFiled[widget]

  return (
    <Fragment key={key}>
      {FormWidget ? widget === 'FormList' ? (
        <Col key={key} span={colSpan} offset={offset}>
          <FormList newSchema={newSchema} setNewSchema={setNewSchema} {...reset}>
            {FormWidget({ newSchema, setNewSchema, ...reset })}
          </FormList>
        </Col>
        ) : widget === 'SubGroups' ? (
        <Col key={key} span={colSpan} offset={offset}>
          <Subgroups newSchema={newSchema} setNewSchema={setNewSchema} {...reset} >
            {FormWidget({ newSchema, setNewSchema, ...reset })}
          </Subgroups>
        </Col>
        ) : isDepend ? (
          <Col key={key} span={colSpan} offset={offset}>
              <ConditionWidget newSchema={newSchema} setNewSchema={setNewSchema} {...reset}>
              {FormWidget({ newSchema, setNewSchema, ...reset })}
            </ConditionWidget>
          </Col>
        ) : (
          <Col key={key} span={colSpan} offset={offset}>
            {FormWidget({ newSchema, setNewSchema, ...reset })}
          </Col>
        ) : null
      }
    </Fragment>
  )
}
export default index
